<template>
  <div>
    <!-- <div class="node" v-has="{action: 'order:list', effect: 'move'}"> -->
    <!-- 搜索 -->
    <div :class="[$style.search_box ,$style.radus, $style.topSelect]">
      <SearchInput
        placeholder="请输入"
        label="车牌号"
        style="margin-right:20px"
        :value="searchs.plate"
        :onChange="(val) => changeSearch('plate',val)"
      />
      <SearchInput
        placeholder="请输入"
        label="手机号"
        style="margin-right:20px"
        :value="searchs.phone"
        :onChange="(val) => changeSearch('phone',val)"
      />
      <!-- <div :class="[$style.elseSear]" > -->
        <SearchInput
        placeholder="订单编号"
        label="订单编号"
        style="margin-right:20px"
        :value="searchs.oid"
        :onChange="(val) => changeSearch('oid',val)"
        v-if="more"
      />
      <SearchInput
        placeholder="互联互通订单编号"
        label="互联互通订单编号"
        style="margin-right:20px"
        :value="searchs.thirdOid"
        :onChange="(val) => changeSearch('thirdOid',val)"
        v-if="more"
      />
      <SearchInput
        placeholder="枪编号"
        label="枪编号"
        style="margin-right:20px"
        :value="searchs.gunSn"
        :onChange="(val) => changeSearch('gunSn',val)"
        v-if="more"
      />
      <SearchInput
        placeholder="请输入"
        label="支付编号"
        style="margin-right:20px"
        :value="searchs.wxSn"
        :onChange="(val) => changeSearch('wxSn',val)"
        v-if="more"
      />
        <div :class="$style.selectBox" v-if="more">
        <label>订单类型：</label>
        <el-select
          v-model="searchs.type"
          clearable
          @clear="changePort('type')"
          @change="pageChange(1, 'type')"
          placeholder="请选择"
        >
        <el-option label="NFC订单" :value="1"></el-option>
        <el-option label="微信订单" :value="2"></el-option>
        <el-option label="集团客户订单" :value="3"></el-option>
        <el-option label="第三方平台订单" :value="4"></el-option>
        <el-option label="个人充电桩订单" :value="5"></el-option>
        </el-select>
      </div>
      <div :class="$style.selectBox" v-if="more">
        <label>运营商：</label>
        <el-select
          v-model="searchs.api"
          clearable
           @clear="changePort('api')"
          @change="pageChange(1, 'api')"
          placeholder="请选择"
        >
        <el-option
                v-for="item in thirdList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
        </el-select>
      </div>
      <div :class="$style.selectBox" v-if="more">
        <label>车牌减免状态：</label>
        <el-select
          v-model="searchs.plateState"
          clearable
          @clear="changePort('plateState')"
          @change="pageChange(1, 'plateState')"
          placeholder="请选择状态"
        >
         <el-option label="无车牌" :value="0"></el-option>
          <el-option label="待处理" :value="1"></el-option>
          <el-option label="减免异常" :value="2"></el-option>
          <el-option label="减免成功" :value="3"></el-option>
          <el-option label="减免失败" :value="4"></el-option>
        </el-select>
      </div>
      <div :class="$style.selectBox" v-if="more">
        <label>订单状态：</label>
        <el-select
          v-model="searchs.state"
          clearable
          @clear="changePort('state')"
          @change="pageChange(1, 'state')"
          placeholder="请选择状态"
        >
          <el-option label="等待处理中" :value="1"></el-option>
          <el-option label="充电中" :value="2"></el-option>
          <el-option label="充电取消" :value="3"></el-option>
          <el-option label="充电完成" :value="4"></el-option>
          <el-option label="充电异常" :value="5"></el-option>
          <el-option label="充电失败" :value="6"></el-option>
        </el-select>
      </div>
       <div :class="$style.selectBox" v-if="more">
        <label>结算状态：</label>
        <el-select
          v-model="searchs.settlement"
          clearable
          @clear="changePort('settlement')"
          @change="pageChange(1, 'settlement')"
          placeholder="请选择状态"
        >
        <el-option label="已结算" :value="1"></el-option>
        <el-option label="未结算" :value="0"></el-option>
          
        </el-select>
      </div>
       <div :class="$style.selectBox" v-if="more">
        <label>创建时间：</label>
        <el-date-picker
          v-model="searchs.appointmentTime"
          type="datetimerange"
          @change="timeChange('appointmentTime')"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
         
          value-format="timestamp"
          :picker-options="pickerOptions"
          
        ></el-date-picker>
      </div>
      <div :class="$style.selectBox" v-if="more">
        <label>订单结算时间：</label>
        <el-date-picker
          v-model="searchs.appointmentTimeEnd"
          type="datetimerange"
          @change="setTimeChange()"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
      </div>
       <div :class="$style.selectBox" v-if="more">
            <label>请选择：</label>
            <el-select clearable  v-model="searchs.siteId" @change="changeSite(1)" placeholder="站点">
              <el-option
                v-for="item in siteList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select clearable v-model="searchs.pileId" @change="changePile(1)" placeholder="选择桩">
              <el-option
                v-for="item in pileList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select clearable v-model="searchs.gunId" @change="changeGun('gunId')" placeholder="选择枪">
              <el-option
                v-for="item in gunList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
       </div>
      <!-- </div> -->
      <div :class="$style.searchBox1" style="margin-left: 20px">
         <el-button  size="small" plain  icon="el-icon-search" id="keyDownSearch" @click="getRate()">查询</el-button>
      </div>
      <div :class="[$style.more]" v-if="!ismOrpc" @click="showMore"><i :class="more? 'el-icon-arrow-down':'el-icon-arrow-up'"></i> {{more? '收起':'更多筛选'}}</div>
       
    </div>
    <!-- 统计 -->
    <!-- <div :class="[$style.amountbox]" v-if="ismOrpc">
      <div :class="[$style.titlebox]">
        <div>数据总览</div>
         <div :class="$style.selectBox" style="margin-right: 100px;">
          <el-select
            style="width:200px"
            v-model="searchs.api"
            clearable
            @change="changeCompany(api)"
            placeholder="请选择运营商">
            <el-option  label="全部" value=""></el-option>
            <el-option v-for="item in company" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
       </div>
      </div>
     
      <div :class="[$style.total,$style.radus]">
        <div :class="[$style.linedo]"></div>
        <div :class="[$style.totalNum]">
          <div>{{count.total}}</div>
          <div>订单金额</div>
        </div>
        <div :class="[$style.totalleft]">
          <div >
          <div>电费</div>
          <div>{{count.powerPrice}}</div>
        </div>
        <div >
          <div>服务费</div>
          <div>{{count.servicePrice}}</div>
        </div>
        </div>
      </div>

      <div :class="[$style.mingxi]">
        <div :class="[$style.items,$style.radus]"> 
          <div :class="[$style.linedo]"></div>
          <div :class="[$style.totalNum]">
            <div>{{count.electricity}}</div>
            <div>电量(度)</div>
          </div>
        </div>
        <div :class="[$style.items,$style.radus]">
          <div :class="[$style.linedo]"></div>
          <div :class="[$style.totalNum]">
            <div>{{count.chargeNum}}</div>
            <div>单数(笔)</div>
          </div>
        </div>
        <div :class="[$style.items,$style.radus]">
          <div :class="[$style.linedo]"></div>
          <div :class="[$style.totalNum]">
            <div>{{count.shi}}小时{{count.fen}}分</div>
            <div>时长</div>
          </div>
        </div>
      </div>
    </div> -->
   
    <Panel title="全部订单" :intro='intro'>
        <div slot='ext' :class="$style.examine">
          <form :action="port.url" method="POST" target="targetIfr">
          <input type="hidden" name="endTime" :value="port.endTime" v-if="port.endTime" id="">
          <input type="hidden" name="beginTime" :value="port.beginTime" v-if="port.beginTime" id="">
          <input type="hidden" name="settBeginTime" :value="port.settBeginTime" v-if="port.settBeginTime" id="">
          <input type="hidden" name="settEndTime" :value="port.settEndTime" v-if="port.settEndTime" id="">
          <input type="hidden" name="state" :value="port.state" v-if="port.state" id="">
          <input type="hidden" name="type" :value="port.type" v-if="port.type" id="">
          <input type="hidden" name="api" :value="port.api" v-if="port.api" id="">
          <input type="hidden" name="plateState" :value="port.plateState" v-if="port.plateState" id="">
          <input type="hidden" name="thirdOid" :value="port.thirdOid" v-if="port.thirdOid" id="">
          <input type="hidden" name="oid" :value="port.oid" v-if="port.oid" id="">
          <input type="hidden" name="wxSn" :value="port.wxSn" v-if="port.wxSn" id="">
          <input type="hidden" name="plate" :value="port.plate" v-if="port.plate" id="">
          <input type="hidden" name="phone" :value="port.phone" v-if="port.phone" id="">
          <input type="hidden" name="gunId" :value="port.gunId" v-if="port.gunId" id="">
          <input type="hidden" name="siteId" :value="port.siteId" v-if="port.siteId" id="">
          <input type="hidden" name="pileId" :value="port.pileId" v-if="port.pileId" id="">
          <input type="hidden" name="settlement" :value="port.settlement" v-if="port.settlement" id="">
          <input type="hidden" name="gunSn" :value="port.gunSn" v-if="port.gunSn" id="">
          <button v-has="{action: 'export:order', effect: 'move'}" v-if="ismOrpc" type="submit"   :class="$style.export"> <i class="el-icon-upload"></i>导出数据</button>
         </form>
         <iframe name="targetIfr" style="display:none"></iframe> 
        </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button size="mini" icon="el-icon-info"
            v-has="{action: 'order:third:info', effect: 'move'}"
            @click="()=>commentDetail(operation.row.oid, operation.row.type)"
          >详情</el-button>
          <el-button size="mini" type="danger"
            v-has="{action: 'order:exception:bill', effect: 'move'}"
             v-if="operation.row.state==5 || operation.row.state==3 || (operation.row.settlement == 0 && operation.row.state==4) || (operation.row.notify ==0)"
            @click="()=>abNormal(operation.row.oid, operation.row.type)"
          >异常处理</el-button>
          <span v-if="operation.row.state==2">
            <el-button size="mini" type="danger"
            v-has="{action: 'order:control:stop', effect: 'move'}"
            @click="()=>remove(operation.row.oid)"
          >停止充电</el-button>
          </span>
          <el-button size="mini" type="primary" plain
            v-has="{action: 'parking:manage:exemption', effect: 'move'}"
             v-if="operation.row.plateState !=3 && operation.row.plateState !=0"
            @click="()=>palteFree(operation.row.oid)"
          >车牌减免</el-button>
          <el-button size="mini" type="primary" plain
            v-has="{action: 'parking:manage:exemption', effect: 'move'}"
            @click="()=>exemption(operation.row)"
          >手动减免</el-button>
          <el-button size="mini"
            v-if="operation.row.api ==7"
            @click="()=>getPhone(operation.row)"
          >查询手机号</el-button>
          <el-button size="mini"
          v-has="{action: 'order:repush:push', effect: 'move'}"
            v-if="operation.row.type  ==4"
            @click="()=>resPush(operation.row)"
          >重新推送</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChangePager"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>

    <!-- 车牌减免记录 -->
    <ModalPanel 
      :visible='visibleTB'
      title="减免记录"
      confirmName="确认减免"
      :onCancel="onCancelTB"
      :onOk="onSubmitTB">
      <div>
      <TableEncapsulation
      slot="body"
      :tableConfig="tableConfigTB"
      :tableData="tableDataTB"
          >
          <template slot="operation" slot-scope="operation">
              <el-button size="mini"
                  type="text"
                  @click="()=>bindId(operation.row.oid)"
                >选择</el-button>
              </template>
              <TablePager
                slot="pager"
                v-if="pager1.use"
                :size="pager1.size"
                :pageChange="pageChange1"
                :show-total="pager1.showTotal"
                :total="pager1.total"
                :current="pager1.current"
              >
                <span class="demonstration">GO></span>
              </TablePager>
    </TableEncapsulation>
      </div>
    </ModalPanel>
    <!-- app车牌减免 -->
    <ModalPanel 
      :visible='isCar'
      title="车牌减免"
      :onCancel="onCancelCar"
      :class="$style.bannerDialog"
      :showFooter="false"
      :onOk="onSubmit">
      <div>
        <CarNumber v-if="isCar" @confirms="fecthCard"></CarNumber>
      </div>
    </ModalPanel>

    <ModalPanel 
      :visible='visible'
      title="车牌减免"
      :onCancel="onCancel"
      :class="$style.bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumn'
          :updateData="fecthCard"
          labelWidth='100px'
          ref="configModal"
          :class="$style.ModifyForm"
          :temporaryData='modalData'>

        </ModifyForm>
      </div>
    </ModalPanel>

    <ModalPanel 
      :visible='showPhone'
      title="手机号"
      :onCancel="onCancel1"
      :class="$style.bannerDialog"
      :onOk="telPhone">
      <div>
        手机号: <a style="color: blue; text-decoration: underline;" :href="'tel:'+ phone " >{{phone}}</a>
      </div>
    </ModalPanel>
    <!-- </div> -->
    <!-- <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'order:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div> -->
  </div>
</template>
<script>
import request from "@/tools/request";
import requestService from "@/tools/requestExport";
import qs from 'qs';
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import CarNumber from "@/components/CarNumber";
import TreeSearch from '@/components/treeSearch';
export default {
  name: "orderIndex",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModifyForm,
    ModalPanel,
    CarNumber,
    TreeSearch
  },
  data() {
    return {
      intro:{
        title: '全部订单-介绍文档',
        content:`<ul><li>全部订单包括 微信小程序订单和第三方平台订单、私人桩订单</li></ul><p><br></p><ul><li>注意：</li></ul><ol><li class="ql-indent-1">第三方订单中，快电不返回用户手机号，如需联系用户请在操作中点击‘查询手机号’。</li></ol><ul><li>车牌减免失败情况：</li></ul><ol><li class="ql-indent-1">用户输入车牌错误或软件上绑定的车牌与当时充电车辆不符，需要点击‘手动减免车牌’，并输入正确车牌号减免，并提醒用户修改车牌号</li><li class="ql-indent-1">用户车牌正确，但因停车场各种不确定因素导致车牌减免失败，先点击‘车牌减免’，查看是否提示减免成功，若还是无法减免成功，则需要帮助用户与停车场之间沟通放行</li><li class="ql-indent-1">用户减免成功，但是停车超过2小时，则需要缴费出场，收费标准按停车场方规定</li><li class="ql-indent-1">以上情况不包括我公司自建出场闸口。如 ‘武侯万达地面广场充电站’</li></ol><p><br></p><p><br></p>`
      },
      visible: false,
      more: true,
      ifCheckCar: false,
      visibleTB: false,
      csPlate: {},
      tableDataTB: [],
      // keyDownSearch: '',
      isCar: false,
      modalData: {},
      showPhone: false,
      token: window.localStorage.getItem('user_token'),
      phone: '',
      searchs:{
        url: "https://192.168.1.99:8080/api/export/order"+window.localStorage.getItem('user_token'),
        component: 'orderlist',
        gunId:'',
        siteId:"",
        pileId :"",
        type:'',
        groups:['api'],
        oid:'',
        state:'',
        phone: '',
        plate: '',
        wxSn: '',
        settlement: '',
        appointmentTime:[],
        appointmentTimeEnd:'',
        api:'',
        plateState: "",
        thirdOid: "",
        gunSn: '',
      },
      port:{
        url: this.$baseUrl+"/export/order?token="+localStorage.getItem('user_token'),
        gunId:'',
        siteId:"",
        pileId :"",
        type:'',
        groups:['api'],
        oid:'',
        state:'',
        phone: '',
        plate: '',
        wxSn: '',
        settlement: '',
        endTime:'',
        beginTime: '',
        settBeginTime:'',
        settEndTime: '',
        api:'',
        plateState: "",
        thirdOid: "",
        gunSn: '',
      },
      editColumn: [
        {    
          name: "车牌号",
          prop: "plate",
          type: "text",
          required: true,
          width: 24
        },
        {
          name: "减免原因",
          prop: "reason",
          type: "select",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': '车牌错误','name': "车牌错误"},{'id':'停车场原因', 'name':"停车场原因"}],
          width:12,
          required: false
        },
        {    
          name: "填写原因",
          prop: "msg",
          type: "text",
          required: false,
          width: 24
        },
      ],
      company:[],
      thirdList: [],
      siteList: [],
      pileList: [],
      gunList: [],
      tableData: [],
      operation: true,
      pager: {
        component: 'orderlist',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
       pager1: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      count:{},
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  created() {
    this.more = this.$store.getters.ismOrpc
    let now = new Date().getTime() + 3600 * 1000 * 24
    let year = new Date(now).getFullYear()
    let month = new Date(now).getMonth() 
    let day = new Date(now).getDate()
    let last = new Date().getTime() - 3600 * 1000 * 24 * 90
    let lastYear =  new Date(last).getFullYear() 
    let LastMonth = new Date(last).getMonth() 
    let lastDay = new Date(last).getDate()
    this.searchs.appointmentTime = [ new Date(lastYear, LastMonth, lastDay, 0, 0,0), new Date(year, month, day, 0, 0,0)]
    this.searchsFnc()
    this.companyTh()
    this.iotSite()
    if(this.$route.query.phone){
      this.searchs.phone = this.$route.query.phone
      this.port.phone = this.$route.query.phone
    }
    if(this.searchs.siteId){
      this.changeSite(0)
    }else{
      this.getRate();
      this.getAmount()
    }
    
  },
  mounted(){
    var _this = this       
    document.onkeyDownSearch = function(e) {            
    let key = window.event.keyCode            
    if (key== 13) {
         _this.getRate()
      }
    }
    this.port.endTime= this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : undefined
    this.port.beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
  },
  computed: {
    ismOrpc() {
			    return this.$store.getters.ismOrpc;
			},
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "订单号",
            type: "text",
            prop: "chargeOrderNum",
            align: "center"
          },
           {
            label: "用户类型",
            type: "other",
            prop: "clientUserType",
            align: "center",
            fnc: val =>  val == 100 ? "原价用户" : val == 200 ? "普通用户" : val == 300 ? "VIP用户" : val == 400 ? "车队用户":  "互联互通"
          },
          {
            label: "手机号",
            type: "phoneNum",
            prop: "phone",
            align: "center",
            style: 'color: blue; text-decoration: underline;'
          },
          {
            label: "充电量",
            type: "text",
            prop: "totalElecQuantity",
            align: "center",
            width: 70
          },
          {
            label: "结算总费用",
            type: "text",
            prop: "clearingTotalMoney",
            align: "center",
            width: 70
          },
          // {
          //   label: "附加费",
          //   type: "text",
          //   prop: "surcharge",
          //   align: "center",
          //   width: 70
          // },
           {
            label: "结算状态",
            type: "other",
            prop: "settlement",
            align: "center",
            fnc: val => val ? "已结算" : "未结算" ,
            class:val => val  ? "agree" : "denger-tag" ,
            width: 70
          },
          {
            label: "结束soc",
            type: "text",
            prop: "endSoc",
            align: "center",
            fnc: val => val  ? val+"%" : '',
            width: 70
          },
          {
            label: "订单状态",
            type: "other",
            prop: "state",
            align: "center",
            fnc: val => val == 1 ? "启动中" : val == 2 ? "充电中" : val == 3 ? "停止中" : val == 4 ? "已结束": "未知"
          },
          {
            label: "车牌号",
            type: "text",
            prop: "plateNum",
            align: "center"
          },
          {
            label: "停车减免状态",
            type: "other",
            prop: "parkingReduceState",
            align: "center",
            fnc: val =>  val == 1 ? "未减免" : val == 2 ? "减免成功" : "减免失败"
          },
          {
            label: "减免失败信息",
            type: "text",
            prop: "parkingFailMsg",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:280
          }
        ].filter(Boolean)
        }
    },
    tableConfigTB () {
      return {
        selection: false,
        columnConfig: [
          {
            label: "订单号",
            type: "text",
            prop: "oid",
            align: "center"
          },
          {
            label: "减免原因",
            type: "text",
            prop: "message",
            align: "center"
          },
          {
            label: "操作人",
            type: "text",
            prop: "operatorName",
            align: "center"
          },
          {
            label: "时间",
            type: "text",
            prop: "createTime",
            align: "center",
          },
          // this.operation && {
          //   type: "operation",
          //   align: "center",
          //   label: "操作",
          //   width:180
          // }
        ].filter(Boolean)
        }
    }
  },

  destroyed(){
    document.onkeyDownSearch = ''
  },
  methods: {
    showMore(){
      this.more = !this.more
    },
    keyDownSearch(e){
      if(e.keyCode == 13){
        this.getRate();
      }
    },
    telPhone(){},
    //输入车牌号
    exemption(row){
      this.modalData = {plate: row.plate, id: row.siteId,reason: '车牌错误', oldPlate: row.plate}
      // if(this.ismOrpc){
      //  this.visible = true
      // }else{
      //   this.$nextTick(()=>{
      //     this.isCar = true
      //   })
      // }
      // this.modalData = {plate: row.plate, id: row.siteId}
      this.visible = true
    },
    async getPhone(row){
      const res = await request({
        url: "/order/third/phone/"+row.oid,
        method: "GET",
        
      });
      if(res.phone.success){
        this.phone = res.phone.phone
      }else{
        this.phone = res.phone.msg
      }
      
      this.showPhone = true
    },
    async resPush(row){
      const res = await request({
        url: `/order/repush/${row.oid}`,
        method: "POST",
        
      });
      if (res.code ==0){
        this.$message.success(res.msg)
      } 
    },
    onCancel(){
      this.visible = false
    },
    onCancelCar(){
      this.isCar= false
    },
    onCancel1(){
      this.showPhone = false
    },
     async updateData(values, force){
      let {plate, id} = values
      let siteId  = id
      let num = 2, type = 1
      // console.log('values',values)
      let url, msg
      url = '/parking/exemption'
      msg = '成功'
      // let force = forces
      let res = await request({
        url: url,
        method: 'POST',
        data: { plate, num, type, siteId ,force }
      })
      if (res.code ==0){
        // this.relation(values)
        this.$message.success(res.msg)
        this.visible = false
        this.visibleTB = false
        return
      } 
      if(res.code == 1122){
         this.$confirm('此车牌为黑名单用户,确认要减免?', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let res1 = await request({
          url: url,
          method: 'POST',
          data: { plate, num, type, id ,force:true}
        })
        if(res1.code !==0) return
        // this.relation(values)
        this.$message.success(res.msg)
         this.visible = false
         this.visibleTB = false
      })
      }else{
        
      }
    },
    async relation(val){
     let message = val.msg ? val.msg : val.reason
     let bindingCar =val.oldPlate
     let useCar = val.plate
     let res = await request({
        url: 'parking/relation',
        method: 'POST',
        data: { message, useCar, bindingCar }
      })
    },
   
    async fecthCard(val){
      // console.log('val', val)
    //  let plate =this.ismOrpc ? val.plate : val
     let plate = val.plate 
     let that = this
     this.updateData(val, true)
     return
     let res = await request({
        url: '/parking/findLog',
        method: 'POST',
        data: { plate }
      })
      
      if(res.page.list.length >0){
        this.tableDataTB = res.page.list
        this.visibleTB = true
        this.csPlate = val
        this.$confirm(`此车牌已手动减免${res.page.list.length}次`, '确认强制减免', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(  () => {
        if(that.ismOrpc){
          that.updateData(val, true)
        }else{
          that.onSubmitCar(val, true)
        }
      })
      }else{
        // if(this.ismOrpc){
        //   this.updateData(val, false)
        // }else{
        //   this.onSubmitCar(val, false)
        // }
        this.updateData(val, false)
      }
      
    },
    async onSubmitCar(val, forces){
      //川ADD4125
      console.log('提交car', val)
      let id = this.modalData.id
      let num = 2, type = 1
      let siteId  = id
      let {plate} = val
      let url, msg
      let force = forces
      url = '/parking/exemption'
      msg = '成功'
      let res = await request({
        url: url,
        method: 'POST',
        data: { plate, num, type, siteId, force }
      })
      // console.log('res',res)
      if (res.code !==0 && res.code !==1122) return
      if(res.code == 1122){
        this.$confirm('此车牌为黑名单用户,确认要减免?', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let res1 = await request({
          url: url,
          method: 'POST',
          data: { plate, num, type, siteId ,force: true}
        })
        if(res1.code !==0) return
         this.$message.success(res.msg)
         this.isCar = false
         this.visibleTB = false
      })
      }else{
        this.$message.success(res.msg)
        this.isCar = false
        this.visible = false
        this.visibleTB = false
      }
      

    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    searchsFnc (){
      let searchs = this.$store.getters.searchs
      if(searchs  &&searchs.component == 'orderlist'){
        this.searchs = searchs
      }
      let pager = this.$store.getters.pager
      if(pager &&pager.component == 'orderlist'){
        this.pager = pager
      }
    },
    
    async exportFn(){
      let endTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : undefined
      let beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
     this.$http.post(this.$baseUrl+'/export/order', {
        params: {
            endTime: endTime,
            beginTime: beginTime,
        },
        headers: {
          'Content-Type':'application/json',
          'token':localStorage.getItem('user_token')
        },
      }).then((res) => {
            })
        return
     
     let settBeginTime = this.searchs.appointmentTimeEnd ? (dateFormat(this.searchs.appointmentTimeEnd[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      let settEndTime = this.searchs.appointmentTimeEnd ? (dateFormat(this.searchs.appointmentTimeEnd[1],"yyyy-MM-dd HH:mm:ss")) : undefined
      let state =  this.searchs.state
      let type =this.searchs.type
      let api = this.searchs.api
      let plateState = this.searchs.plateState
      let thirdOid = this.searchs.thirdOid
      let oid = this.searchs.oid, wxSn = this.searchs.wxSn, plate = this.searchs.plate , phone = this.searchs.phone, settlement = this.searchs.settlement
      let page = this.pager.current
      let gunId = '', siteId = '', pileId = '', gunSn = this.searchs.gunSn

      if(this.searchs.gunId){
        gunId = this.searchs.gunId
      }else{
        if(this.searchs.pileId){
          pileId = this.searchs.pileId
        }else {
          siteId = this.searchs.siteId
        }
      }
      // console.log('search', {beginTime, endTime, state, oid, page, wxSn, plate, phone, gunId, siteId, pileId, settlement, type, settBeginTime, settEndTime, api, thirdOid, plateState, gunSn })
      let search = objectFilter({beginTime, endTime, state, oid, page, wxSn, plate, phone, gunId, siteId, pileId, settlement, type, settBeginTime, settEndTime, api, thirdOid, plateState, gunSn })
      const res = await requestService({
        url: "/export/order",
        method: "POST",
        responseType: 'blob',
        data: qs.stringify(search)
      });
    },
    async getRate() {
      // console.log('this.searchs.gunId',this.searchs)
      let endTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : undefined
      let beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      let settBeginTime = this.searchs.appointmentTimeEnd ? (dateFormat(this.searchs.appointmentTimeEnd[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      let settEndTime = this.searchs.appointmentTimeEnd ? (dateFormat(this.searchs.appointmentTimeEnd[1],"yyyy-MM-dd HH:mm:ss")) : undefined
      let state =  this.searchs.state
      let type =this.searchs.type
      let api = this.searchs.api
      let plateState = this.searchs.plateState
      let thirdOid = this.searchs.thirdOid
      let oid = this.searchs.oid, wxSn = this.searchs.wxSn, plate = this.searchs.plate , phone = this.searchs.phone, settlement = this.searchs.settlement
      let page = this.pager.current
      let gunSn = this.searchs.gunSn
      let gunId = '', siteId = '', pileId = ''
      if(this.searchs.gunId){
        gunId = this.searchs.gunId
      }else{
        if(this.searchs.pileId){
          pileId = this.searchs.pileId
        }else {
          siteId = this.searchs.siteId
        }
      }
      // console.log('search', {beginTime, endTime, state, oid, page, wxSn, plate, phone, gunId, siteId, pileId, settlement, type, settBeginTime, settEndTime, api, thirdOid, plateState, gunSn })
      let search = objectFilter({beginTime, endTime, state, oid, page, wxSn, plate, phone, gunId, siteId, pileId, settlement, type, settBeginTime, settEndTime, api, thirdOid, plateState, gunSn })
      const res = await request({
        url: "/order/list",
        method: "POST",
        data: search
      });
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
      // console.log("数据----", res);
    },
    async changeSite(clear){
      // console.log('clear',clear)
      let url = '/iot/pile/select'
      this.port.siteId = this.searchs.siteId
      let datas = {siteId:this.searchs.siteId}
      const res = await request({
                      url,
                      method: "POST",
                      data:datas
                    })
      // console.log('桩',res)
      this.pileList = res.list
      this.pager.current =1
      if(clear){
        // 选择
         this.searchs.gunId = ''
         this.searchs.pileId = ''
         this.port.gunId = ''
         this.port.pileId = ''
      }else{
        
        //回退
        if(this.searchs.pileId){
          this.changePile(0)
          return false
        }
      }
      // this.getRate()
      // this.getAmount()
    },
    async changePile(clear){
      let url = '/iot/pile/gun/select'
      this.port.pileId = this.searchs.pileId
      let datas = {pile:this.searchs.pileId}
      const res = await request({
                      url,
                      method: "POST",
                      data:datas
                    })
      // console.log('枪',res)
       this.gunList = res.list
       this.pager.current =1
      if(clear){
        this.searchs.gunId = ''
        this.port.gunId = ''
      }else{
        if(this.searchs.gunId){
          this.changeGun()
          return
        }
      }
      // this.getRate()
      // this.getAmount()
    },
    //第三方公司
    async companyTh(){
      let { list } = await request({
      url: "/third/company/select",
      method: "POST",
      data: {}
      });
      let my = {id: 0, name: '公司自营'}
      this.thirdList = list
      this.company = [my, ...list]
    },
    //站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
       this.siteList = list
    },
    
    //停车减免暴力减免
    async palteFree(id){
      let res = await request({
      url: "/plate/exemption/execute/"+id,
      method: "GET",
      data: {}
      });
      //  console.log(res)
      if(res.code !==0) return
      this.$message.success('减免成功')
    },
    changeGun(){
      this.searchs.gunId = this.searchs.gunId
      this.port.gunId = this.searchs.gunId
      // this.getRate()
      // this.getAmount()
    },
    timeChange(){
      let endTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : undefined
      let beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      this.port.endTime = endTime
      this.port.beginTime = beginTime
      // this.getRate()
      // this.getAmount()
    },
    setTimeChange(){
      let settBeginTime = this.searchs.appointmentTimeEnd ? (dateFormat(this.searchs.appointmentTimeEnd[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      let settEndTime = this.searchs.appointmentTimeEnd ? (dateFormat(this.searchs.appointmentTimeEnd[1],"yyyy-MM-dd HH:mm:ss")) : undefined
      this.port.settBeginTime = settBeginTime
      this.port.settEndTime = settEndTime
      // this.getRate()
    },
    abNormal(id, type){
      this.$store.commit('saveSearchs', this.searchs)
      this.$store.commit('savePager', this.pager)
      this.$router.push({ path: '/order/abnormal',query:{id:id, type: type} })
    },
    changeCompany(key) {
      this.getAmount()
    },
    changeSearch(key, val) {
      this.searchs[key] = val;
      this.port[key] = val;
      // console.log('port',this.port)
      this.pager.current = 1;
    },
    pageChange(val, name) {
      this.pager.current = 1;
      this.port[name] = this.searchs[name]
      // console.log('port',this.port)
      // this.getRate();
    },
    pageChangePager(val){
      this.pager.current = val;
      // this.port[name] = this.searchs[name]
      this.getRate();
    },
    changePort(name){
      // console.log('name', name)
      this.port[name]= ''
    },
    editStore(id){
      this.$router.push({ path: "/editStore",query:{id:id} })
    },
    commentDetail(id, type){
      this.$store.commit('saveSearchs', this.searchs)
      this.$store.commit('savePager', this.pager)
      
      let path1 
      type = type ==4 ? 'third' : 'wx'
      path1 = { path: "/order/third/info",query:{id:id, type:type}}
       this.$router.push(path1)
      // let routeData = this.$router.resolve(path);
      // window.open(routeData.location.path, "_blank");
      
    },
    remove(id){
       this.$confirm('确认停充吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
       const del = await request({
                      url:'/order/control/stop/'+id,
                      method: "GET",
                    })
        if(del.code !==0) return
        this.$message.success('停充成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.getRate()
      })
    },
    //总计
    async getAmount() {
      let endTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : undefined
      let beginTime = this.searchs.appointmentTime ? (dateFormat(this.searchs.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      let siteId = '', gunId ='',pileId = ''
      let groups = ['site']
      if(this.searchs.gunId){
        gunId = this.searchs.gunId
        groups = ['gun']
      }else{
        if(this.searchs.pileId){
          pileId = this.searchs.pileId
          groups = ['pile']
        }else {
          siteId = this.searchs.siteId
        }
      }
      groups.push('api')
      let api = this.searchs.api
      let search = objectFilter({beginTime, endTime, gunId,siteId, pileId, api})
      let res = await request({
        url: "/order/count/statistics",
        method: "POST",
        data: search
      });
      let counts= res.count
      let shi = 0,fen = 0,TineAll = 0,total = 0,powerPrice = 0,servicePrice = 0,count={},electricity = 0, chargeNum = 0
      // counts.map(item => {
      //   total+=(item.powerPrice + item.servicePrice)
      //   powerPrice += item.powerPrice
      //   servicePrice += item.servicePrice
      //   TineAll+=item.chargeTime
      //   electricity+=item.electricity
      //   chargeNum+=item.chargeNum
      //   return item
      // })
      total = (counts.powerPrice + counts.servicePrice)
      powerPrice = counts.powerPrice
      servicePrice = counts.servicePrice
      TineAll = counts.chargeTime
      electricity = counts.electricity
      chargeNum = counts.chargeNum
      count.total = total.toFixed(2)
      count.powerPrice = powerPrice.toFixed(2)
      count.servicePrice = servicePrice.toFixed(2)
      count.electricity = electricity.toFixed(3)
      count.chargeNum = chargeNum
      shi = TineAll ? parseInt(TineAll/3600) :0
      count.shi = shi >=10 ? shi : '0'+shi
      fen  = TineAll ? Math.ceil((TineAll - (parseInt(TineAll/3600))*3600)/60)  : 0
      count.fen = fen >=10 ? fen : '0'+fen
      // console.log('总计',count)
      this.count = count
    },
    //车牌减免记录
    choosePlate(){
      if(this.ismOrpc){
        this.updateData(this.csPlate, false)
      }else{
        this.onSubmitCar(this.csPlate, false)
      }
    },
    pageChange1(val){
      this.pager1.current = val;
    },
     onCancelTB(){
      this.visibleTB = false
    },
    async onSubmitTB(){
      // this.$refs['configModal'].onSubmit()
      this.choosePlate()
    },
  }
}
</script>
<style lang='scss' module>
.more {
    border: 1px solid #adadad;
    border-radius: 4px;
    padding: 2px;
    font-size: 14px;
}
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .elseSear{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}
.amountbox {
  // height: 80px;
  padding-bottom: 10px;
  margin: 6px auto;
  background: #fff;
  .titlebox {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .total {
    display: flex;
    height: 65px;
    background: #f6f8f9;
    margin-left: 20px;
    padding: 10px 20px;
    align-items: center;


    .totalleft {
      font-size: 13px;
      color: gray;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
  }
      .linedo {
      height: 70%;
      width: 4px;
      background: #d8831a;
      /* margin-left: 20px; */
      border-radius: 26px;
    }
.totalNum :nth-child(1){
      font-size: 30px;
      color: #4a4947;
      }
    .totalNum :nth-child(2){
      color: gray;
    font-size: 14px;
       }
}
    .totalNum {
      padding: 0 10px;
      
    }
.mingxi {
  display: flex;
  margin-left: 20px;
  margin-top: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  .items {
    width: 28%;
    background: #f6f8f9;
    height: 66px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    flex: 1 0;
  }
}
.radus {
  border-radius: 5px;
}
.exportbox {
    display: flex;
    justify-content: flex-end;
    background: #fff;
    padding-bottom: 5px;
}
.export {
    color: #FFF;
    background-color: #F56C6C;
    border-color: #F56C6C;
    border: 1px solid #F56C6C;
    border-radius: 1px;
    padding: 7px 10px;
    cursor: pointer;
}
.selectBox {
  margin: 4px 10px;
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
.el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
  max-width: 400px !important;
    min-width: 300px !important;
}
.el-date-range-picker.has-sidebar {
  width: 481px !important;
  top: 112px !important;
    left: 0 !important;
}
.el-date-range-picker .el-picker-panel__body {
  min-width: 300px !important;
  display: flex;
    flex-wrap: wrap;
}
.el-date-range-picker__time-header {
  width: 62%;
  display: flex;
  flex-wrap: wrap;
}
</style>